<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">{{title}}</block>
    </cu-custom>
    <view>
      <view class="content-img">
        <image src="../../static/11.png" />
      </view>
    </view>

    <view class="u-f-column u-f-ajc take-phtot" @click="chooseImage">
      <image :src="picUrl.length ? 'https://jxjsservice.jxfit.cn/file'+picUrl[0] : '../../static/paizhao.png'" mode=""></image>
      <view style="color: #FFFFFF;font-size: 24upx;">
        拍摄照片
      </view>
    </view>

    <view class="u-f-ajc u-f-jse">
      <view class="picker-list u-f-ajc u-f-column">
        <view style="color: #FFFFFF;font-size: 24upx;">
          {{input== 2 ? "左侧评分" : "评分"}}
        </view>
        <picker class="pickers" @change="bindPickerChange($event, 1)" :value="array[input1]" :range="array">
          <view class="u-f-ajc" style="width: 100%;" :class="'' + input1 ? 'active' : ''">{{'' + input1 ? array[input1]+'分' : '分'}}</view>
        </picker>
      </view>
      <view class="picker-list u-f-ajc u-f-column" v-if="input == 2">
        <view style="color: #FFFFFF;font-size: 24upx;">
          右侧评分
        </view>
        <picker class="pickers" @change="bindPickerChange($event, 2)" :value="array[input2]" :range="array">
          <view class="u-f-ajc" style="width: 100%;" :class="'' + input2 ? 'active' : ''">{{'' + input2 ? array[input2]+'分' : '分'}}</view>
        </picker>
      </view>
    </view>
    <view>
      <textarea v-model="remark" placeholder="请输入评估或意见" />
      </view>
    <button type="default" class="bottom-btn u-f-ajc" @click="submit">保存</button>



  </view>
</template>

<script>
  import timeJS from "../../common/time.js"
  export default {
    data() {
      return {
        title: '',
        input: 0,
        input1: '',
        input2: '',
        remark: '',
        array: [0, 1, 2, 3],
        picUrl: [],
      }
    },
    onLoad(e) {
      console.log(e)
      this.title = e.title;
      this.input = e.input;
      let fmsDetails = uni.getStorageSync('fmsDetails')
      if (fmsDetails && fmsDetails.length) {
        fmsDetails.forEach(item => {
          if (item.title == e.title) {
            this.input1 = item.input1
            this.input2 = item.input2
            this.remark = item.remark
            this.picUrl = item.picUrl
          }
        })
      }
    },
    onHide() {
      
    },
    methods: {
      goPage() {
        let url = `./create_fms?title=${this.title}&input=${this.input}`;
        uni.redirectTo({
          url,
        });
      },
      bindPickerChange: function(e, index) {
        console.log(index)
        this['input' + index] = e.detail.value
        console.log(this['input' + index])
      },
      chooseImage() {
        var _this = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            let file = res.tempFilePaths
            var images = []
            var img = ''
            console.log(res.tempFilePaths[0])
            _this.ticebaogao = res.tempFilePaths[0]
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: 'https://jxjsservice.jxfit.cn/coach/baseService/uploadFile',
                //仅为示例，非真实的接口地址
                filePath: file[i],
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: (res) => {
                  console.log(res)
                  _this.picUrl.push(JSON.parse(res.data).datas.face)
                }
              });
            }
          }
        });
      },
      submit() {
        console.log(this.input1)
        if (this.input == 1) {
          if (!(''+this.input1)) {
            return uni.showToast({
              title: '请选择评分~',
              icon: 'loading'
            });
          }
        } else if (this.input == 2) {
          if (!(''+this.input1)) {
            return uni.showToast({
              title: '请选择左侧评分~',
              icon: 'loading'
            });
          } else if (!(''+this.input2)) {
            return uni.showToast({
              title: '请选择右侧评分~',
              icon: 'loading'
            });
          }
        }
        let obj = {
          title: this.title,
          input: this.input,
          input1: this.input1,
          input2: this.input2,
          remark: this.remark,
          picUrl: this.picUrl,
        }
        console.log(obj)
        let arrays = uni.getStorageSync('fmsDetails')
        if (arrays && arrays.length) { // 有值
          let oladAarrays = arrays.filter(item => item.title == this.title)
          console.log('查看oladAarrays', oladAarrays)
          if (!oladAarrays.length) {
            arrays.push(obj)
          } else {
            let titleIndex = arrays.findIndex(item => item.title == this.title)
            console.log('查看titleIndex', titleIndex)
             arrays.splice(titleIndex, 1, obj)
          }
          
          uni.setStorageSync('fmsDetails', arrays)
        } else { // 没有值
          let arr = []
          arr.push(obj)
          uni.setStorageSync('fmsDetails', arr)
        }
        this.goPage();
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .content-img {
    width: 260rpx;
    height: 240rpx;
    margin: 50rpx auto 40rpx;

    >image {
      width: 100%;
      height: 100%;
    }
  }

  .take-phtot {
    width: 26%;
    border: 1px dashed #686D7C;
    margin: 0 auto 30rpx;
    padding: 30rpx;

    >image {
      width: 100upx;
      height: 100upx;
      margin-bottom: 10rpx;
    }
  }
  .picker-list {
    width: 30%;
    border-bottom: 1px solid #686D7C;
    .pickers {
      width: 100%;
      padding: 10rpx 0;
      margin-top: 20rpx;
      color: #686D7C;
    }
  }

  textarea {
    padding: 20rpx 30rpx;
    width: 80%;
    height: 200rpx;
    margin: 50rpx auto 30rpx;
    background-color: #3F4551;
    color: #686D7C;
  }

  .bottom-btn {
    width: 80%;
    height: 80rpx;
    background-color: $uni-color-zhuti !important;
    color: #FFFFFF !important;
  }
  .active {
    color: $uni-color-zhuti;
  }
</style>
